<template>
	<!-- 购彩记录 订单列表 -->
	<view>
		<view class="header flex">
			<view class="status-bar"></view>
			<view class="title flex-c">
				<view class="flex" @click="fnGoBack()">
					<uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
				</view>
				<view class="flex-c" @click="isShowBetsList = !isShowBetsList">
					<text class="pageTitle">{{pageTitle}}</text>
					<uni-icons type="arrowdown" size="14" color="#fff"></uni-icons>
				</view>
				<view class="share flex" @click="fnChangeDrawer()">
					<uni-icons type="list" size="24" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<view class="holder"></view>
		<view class="type">
			<view class="tab flex-c">
				<view class="flex-c" v-for="(item,index) in tabList" :key="index" @click="fnChangeOrderType(index)">
					<text :class="TabCur == index ? 'text-red':''">{{item.name}}</text>
				</view>
			</view>
			<view class="holder1"></view>
			<view class="typeBox">
				<view class="item flex" @click="fnToOrderDetail(item.order_id)" v-for="(item,index) in orderList" :key="index">
					<view class="top flex-bc">
						<view style="color: #333;font-size: 30rpx;">{{item.bet_name}}</view>
						<view>{{item.create_time}}</view>
					</view>
					<view class="bot flex-bc">
						<view>{{item.price}}元</view>
						<view style="text-align: right;" v-if="item.status == 4">奖金：<text style="color: #F22F29;">{{item.value}}元</text></view>
						<view style="text-align: right;" v-else>{{item.status_name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="betsBox flex" v-if="isShowBetsList">
			<view class="betTypeItem" :class="item.bet_type == bet_type ? 'active':''" @click="fnChooseBetsType(item.bet_type,item.name)" v-for="(item,index) in betTypeList">
				{{item.name}}
			</view>
		</view>
		<uni-drawer mode="right" ref="drawerOrder">
			<view style="padding:100rpx 20rpx;">
				<view class="statusChoose">
					<view class="uni-title">状态选择</view>
					<view class="statusChooseBox flex">
						<view class="statusChooseItem flex-c" v-for="(item,index) in statusChooseList" :key="index">
							<text :class="index == status ? 'typeAc':''" @click="fnChooseStatusTime(1,index)">{{item}}</text>
						</view>
					</view>
				</view>
				<view class="timeChoose">
					<view class="uni-title">时间选择</view>
					<view class="timeChooseBox flex">
						<view class="timeChooseItem flex-c" v-for="(item,index) in timeChooseList" :key="index">
							<text :class="index == time_type ? 'typeAc':''" @click="fnChooseStatusTime(0,index)">{{item}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="btns flex-c">
				<view style="border-top: 1rpx solid #eee;" @click="cancel()">取消</view>
				<view style="background: #F22F29;color: #fff;" @click="comfirm()">确定</view>
			</view>
		</uni-drawer>
		<view class="null" v-if="orderList.length == 0">
			<view class="nullBox flex-col-ac">
				<image src="/static/common/null.png"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				tabList: [{
					name: '购买'
				}, {
					name: '追号'
				}, {
					name: '合买'
				}, {
					name: '跟单'
				}],
				pageTitle: '所有彩种',
				token:uni.getStorageSync('token'),
				page:1,
				row:20,
				orderList:[],
				buy_type:0,//默认购买
				bet_type:0,//默认彩种全部
				time_type:0,
				status:0,
				betTypeList:[],
				isShowBetsList:false,
				statusChooseList:['全部','中奖','未中奖','未开奖','撤单'],
				timeChooseList:['全部','近一周','近一个月','近两个月']
			}
		},
		onLoad() {
			this.fnGetOrderList()
			this.fnGetBetTypeForList()
		},
		methods: {
			tabChange(index) {
				this.TabCur = index;
			},
			fnGoBack() {
				uni.navigateBack()
			},
			fnToOrderDetail(order_id) {
				uni.navigateTo({
					url: `/pages/packageA/buyRecord/orderDetail?order_id=${order_id}`
				})
			},
			fnChangeOrderType(idx) {
				if (this.TabCur == idx) return
				this.TabCur = idx
				this.buy_type = idx
				this.fnGetOrderList()
				this.fnGetBetTypeForList()
			},
			fnGetOrderList() {
				uni.showToast({
					title:'加载中',
					icon:'loading'
				})
				this.request({
					url: '/czb/football_bet/getOrderList',
					method: 'POST',
					data: {
						'store_id': 1,
						'token':this.token,
						'page':this.page,
						'row':this.row,
						'status':this.status,
						'time_type':this.time_type,
						'buy_type':this.buy_type,
						'bet_type':this.bet_type
					},
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) { 
						uni.hideToast()
						this.orderList = ret.data
					}
				})
			},
			fnGetBetTypeForList(){
				this.request({
					url: '/czb/football_bet/getBetTypeForList',
					method: 'POST',
					data: {
						'store_id': 1,
						'buy_type':this.buy_type
					},
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) { 
						var all = {
							'bet_type': 0,
							name: "所有彩种"
						}
						this.betTypeList = ret.data
						this.betTypeList.unshift(all)
						console.log(this.betTypeList)
					}
				})
			},
			fnChooseBetsType(bet_type,name){
				this.isShowBetsList = !this.isShowBetsList
				if(this.bet_type == bet_type) return
				this.bet_type = bet_type
				this.pageTitle = name
				this.fnGetOrderList()
			},
			fnChangeDrawer() {
				this.$refs.drawerOrder.open()
			},
			fnChooseStatusTime(type,index){
				if(type){//状态筛选
					if(index == this.status) return
					this.status = index
				}else{//时间筛选
					if(index == this.time_type) return
					this.time_type = index
				}
			},
			cancel(){
				this.$refs.drawerOrder.close()
			},
			comfirm(){
				this.$refs.drawerOrder.close()
				this.fnGetOrderList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statusChoose,.timeChoose{
		margin-bottom: 120rpx;
		.uni-title{
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}
		.statusChooseBox,.timeChooseBox{
			flex-wrap: wrap;
			.statusChooseItem,.timeChooseItem{
				width: 50%;
				height: 60rpx;
				font-size: 28rpx;
				padding:0 20rpx 0 0;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				text{
					background: #F5F6F8;
					border-radius: 10rpx;
					width: 100%;
					height: 100%;
					text-align: center;
					line-height: 60rpx;
					
				}
				.typeAc{
					background: #F22F29;
					color: #fff;
				}
			}
		}
	}
	.btns{
		font-size: 30rpx;
		width: 100%;
		height: 90rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		view{
			flex: 1;
			height: 100%;
			line-height: 90rpx;
			text-align: center;
			box-sizing: border-box;
		}
	}
	.betsBox {
		z-index: 9;
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		/*  #ifdef  H5  */
		top: 88rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		top: 150rpx;
		/*  #endif  */
		left: 0;
		flex-wrap: wrap;
		padding: 0 20rpx 20rpx;
		background: #fff;
		font-size: 26rpx;
		border-bottom: 1rpx solid #E3E3E3;
		.betTypeItem {
			width: 23%;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
			border: 1rpx solid #999;
			box-sizing: border-box;
			color: #666;
			margin-right: 2.5%;
		}
	
		.betTypeItem:nth-child(4n) {
			margin-right: 0;
		}
	
		.active {
			color: #F22F29;
			border-color: #F22F29;
		}
	}
	.null {
		width: 100%;
		height: 100%;
		background: #fff;
		position: fixed;
		border-top: 1rpx solid #e3e3e3;
		.nullBox {
			position: absolute;
			top: 20%;
			left: 50%;
			width: 400rpx;
			height: 220rpx;
			transform: translateX(-50%);
			font-size: 26rpx;
			color: #999;
			image {
				width: 100%;
				height: 100%;
				display: block;
				margin-bottom: 32rpx;
			}
		}
	
	}
	.header {
		width: 100%;
		/*  #ifdef  H5  */
		height: 88rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		height: 150rpx;
		/*  #endif  */
		background: #F22F29;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		align-items: center;

		.status-bar {
			height: var(--status-bar-height);
		}

		.title {
			width: 100%;
			font-size: 32rpx;
			color: #fff;
			height: 100%;
			padding-top: var(--status-bar-height);
			box-sizing: border-box;

			view {
				flex: 1;
				padding: 0 10rpx;
				height: 100%;
				box-sizing: border-box;
				align-items: center;

				.pageTitle {
					margin-right: 15rpx;
				}
			}

			.share {
				justify-content: flex-end;

				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin-right: 20rpx;
				}

				.select {
					padding: 20rpx;
				}
			}
		}
	}

	.holder {
		/*  #ifdef  H5  */
		height: 88rpx;
		/*  #endif  */
		/*  #ifdef  APP-PLUS  */
		height: 150rpx;
		/*  #endif  */
	}
	.holder1 {
		height: 78rpx;
	}

	.type {
		font-size: 28rpx;
		position: relative;
		.tab {
			position: fixed;
			height: 80rpx;
			width: 100%;
			background: #fff;
			border-bottom: 1rpx solid #E3E3E3;
			view {
				flex: 1;
				height: 100%;
				padding: 0 40rpx;

				text {
					height: 100%;
					width: 100%;
					text-align: center;
					line-height: 80rpx;
					color: #333;
				}
			}
		}
		.typeBox{
			background: #fff;
		}

		.text-red {
			color: #F22F29 !important;
			border-bottom: 4rpx solid #F22F29;
		}

		.item {
			height: 120rpx;
			border-bottom: 1rpx solid #E3E3E3;
			box-sizing: border-box;
			padding: 0 20rpx;
			color: #999;
			font-size: 26rpx;
			justify-content: center;
			flex-direction: column;
		}
	}
</style>
